<template>
  <div class="new_div1">
    <el-dialog
      :open-delay="0"
      :close-delay="0"
      v-model="show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      title="物流信息"
      width="60%"
      draggable
    >
      <div class="line">
        <el-timeline v-if="dataSource && dataSource.length > 0">
          <el-timeline-item
            :class="index === 0 ? 'line1' : 'line2'"
            v-for="(item, index) in dataSource"
            :key="index"
            :timestamp="item.time"
            placement="top"
            :icon="index === 0 ? 'Check' : 'ArrowUp'"
            size="large"
          >
            <el-card>
              <p>
                {{ item.context }}
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <div v-else class="supreme">
          <el-empty description="查无结果，请检查单号和快递公司是否有误" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const show = ref(false)
  const dataSource = ref<any>(false)

  const open = (data: any) => {
    show.value = true
    dataSource.value = data
  }
  //抛出数据
  defineExpose({
    open, // 弹窗
  })
</script>

<style lang="scss" scoped>
  .line {
    height: calc(100vh - 300px);
    overflow: auto;
    :deep() {
      .el-timeline {
        padding-left: 160px;
        padding-top: 20px;
        padding-right: 10px;
      }
      .el-timeline-item__timestamp.is-top {
        position: absolute;
        top: 18px;
        left: -130px;
      }
      .el-timeline-item__node--large {
        top: 18px;
      }
      .el-timeline-item__tail {
        top: 30px;
      }
      .el-card__body {
        padding: 5px 16px;
      }
    }
  }
  .supreme {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 20px;
    color: #ff976f;
  }
  .line1 {
    :deep() {
      .el-timeline-item__node {
        position: absolute;
        background-color: #fff;
        border: 1px solid #7cd51b;
      }
      .el-timeline-item__icon {
        color: #7cd51b;
        font-size: 13px;
      }
      .is-top {
        color: #3b85fa;
      }
    }
  }
  .line2 {
    :deep() {
      .el-timeline-item__node {
        position: absolute;
        background-color: #fff;
        border: 1px solid #e4e7ed;
      }
      .el-timeline-item__icon {
        color: #b7bfd0;
        font-size: 13px;
      }
    }
  }
</style>
